[MNY-128] Dashboard: UI tweaks in token creation flow #7939

MananTank · 2025-08-28T19:10:49Z

PR-Codex overview

This PR primarily focuses on enhancing the UI and logic for token and NFT launch processes, improving error handling, and refining the layout of various components.

Detailed summary

Removed isPending status check from token and NFT launch components.
Updated button visibility and layout in launch-token.tsx and launch-nft.tsx.
Added errorMessage prop to StepCard for displaying errors.
Modified error message for total supply validation in token-distribution.tsx.
Adjusted layout and styling for TokenDistributionBarChart.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Summary by CodeRabbit

New Features
- Step headers can now display error messages.
- Distribution chart moved into the main form flow for clearer visibility.
- Post-launch actions updated: show “View NFT Collection” or “View Coin” when available; show “Cancel” before completion.
Refactor
- Simplified bottom action areas into a two-side layout (error left, controls right) and removed pending-based button disabling for a more predictable flow.
Style
- Improved spacing, alignment, and responsiveness in forms.
- Updated error text to “Token allocation exceeds total supply”.

vercel · 2025-08-28T19:10:51Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
thirdweb-www	Ready	Preview	Comment	Aug 28, 2025 9:35pm

4 Skipped Deployments

Project	Deployment	Updated (UTC)
docs-v2	Skipped	Aug 28, 2025 9:35pm
nebula	Skipped	Aug 28, 2025 9:35pm
thirdweb_playground	Skipped	Aug 28, 2025 9:35pm
wallet-ui	Skipped	Aug 28, 2025 9:35pm

linear · 2025-08-28T19:10:52Z

MNY-128 Token Creation flow minor improvements

changeset-bot · 2025-08-28T19:10:53Z

⚠️ No Changeset found

Latest commit: 51f7418

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2025-08-28T19:10:56Z

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)

TEAM-0000: Entity not found: Issue - Could not find referenced Issue.

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

MCP integration is disabled by default for public repositories
Jira integration is disabled by default for public repositories
Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 2e855f0 and 51f7418.

📒 Files selected for processing (4)

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx (2 hunks)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx (1 hunks)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx (3 hunks)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (4)

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: Size

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch mny-128

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbit in a new review comment at the desired location with your query.
PR comments: Tag @coderabbit in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbit gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbit read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbit help to get the list of available commands.

Other keywords and placeholders

Add @coderabbit ignore or @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbit summary or @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbit or @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

Visit our Status Page to check the current availability of CodeRabbit.
Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

MananTank · 2025-08-28T19:11:06Z

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

merge-queue - adds this PR to the back of the merge queue
hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has enabled the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

codecov · 2025-08-28T19:12:57Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 56.55%. Comparing base (dc3df4b) to head (51f7418).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7939   +/-   ##
=======================================
  Coverage   56.55%   56.55%           
=======================================
  Files         904      904           
  Lines       58581    58581           
  Branches     4142     4142           
=======================================
  Hits        33128    33128           
  Misses      25347    25347           
  Partials      106      106

Flag	Coverage Δ
packages	`56.55% <ø> (ø)`

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

github-actions · 2025-08-28T19:16:12Z

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
thirdweb (esm)	64.06 KB (0%)	1.3 s (0%)	256 ms (+215.09% 🔺)	1.6 s
thirdweb (cjs)	357.05 KB (0%)	7.2 s (0%)	739 ms (+22.25% 🔺)	7.9 s
thirdweb (minimal + tree-shaking)	5.73 KB (0%)	115 ms (0%)	73 ms (+1447.64% 🔺)	187 ms
thirdweb/chains (tree-shaking)	526 B (0%)	11 ms (0%)	63 ms (+4258.61% 🔺)	73 ms
thirdweb/react (minimal + tree-shaking)	19.15 KB (0%)	383 ms (0%)	89 ms (+615.84% 🔺)	472 ms

coderabbitai

Actionable comments posted: 5

🧹 Nitpick comments (1)

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx (1)
6-6: Use React.ReactNode for errorMessage for flexibility (links, CTAs, rich text)

Typing errorMessage as React.ReactNode allows richer content without future refactors.

Apply:
-export function StepCard(props: {
+export function StepCard(props: {
   title: string;
-  errorMessage?: string;
+  errorMessage?: React.ReactNode;

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

MCP integration is disabled by default for public repositories
Jira integration is disabled by default for public repositories
Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between dc3df4b and 2e855f0.

📒 Files selected for processing (4)

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx (2 hunks)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx (1 hunks)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx (3 hunks)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from @/types or local types.ts barrels
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose

Files:

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)

Files:

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx

apps/{dashboard,playground-web}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from @/components/ui/* (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Use NavLink for internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Use cn() from @/lib/utils for conditional class logic
Use design system tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components (Node edge): Start files with import "server-only";
Client Components (browser): Begin files with 'use client';
Always call getAuthToken() to retrieve JWT from cookies on server side
Use Authorization: Bearer header – never embed tokens in URLs
Return typed results (e.g., Project[], User[]) – avoid any
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stable queryKeys for React Query cache hits
Configure staleTime/cacheTime in React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never import posthog-js in server components

Files:

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx

🧠 Learnings (1)

📚 Learning: 2025-06-10T00:50:20.795Z

Learnt from: MananTank
PR: thirdweb-dev/js#7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.

Applied to files:

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx

🧬 Code graph analysis (2)

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx (1)

packages/thirdweb/src/react/web/ui/components/text.tsx (1)

Link (44-62)

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx (1)

apps/dashboard/src/@/components/blocks/FormFieldSetup.tsx (1)

FormFieldSetup (7-54)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: Size
GitHub Check: E2E Tests (pnpm, esbuild)
GitHub Check: Lint Packages
GitHub Check: Analyze (javascript)

🔇 Additional comments (2)

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx (2)

53-54: Surface-level error hook-up looks good

Passing distributionError to StepCard.errorMessage is correct and aligns with the new error surface.

123-124: Copy update is clear and consistent

“Token allocation exceeds total supply” reads better and matches the chart’s “Allocation” terminology.

.../src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx

.../app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx

...[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx

.../(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx

graphite-app · 2025-08-28T21:26:21Z

Merge activity

Aug 28, 9:26 PM UTC: MananTank added this pull request to the Graphite merge queue.
Aug 28, 9:36 PM UTC: Merged by the Graphite merge queue.

--- ## PR-Codex overview This PR focuses on improving the user interface and error handling in the token and NFT launch processes, as well as refining the layout and component interactions in the distribution section. ### Detailed summary - Removed `isPending` state checks from token and NFT launch components. - Updated button layouts to improve user experience in `launch-token.tsx` and `launch-nft.tsx`. - Changed error message text in `token-distribution.tsx`. - Added `errorMessage` prop to `StepCard` for better error display. - Adjusted layout and styling for improved responsiveness and alignment. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`   ## Summary by CodeRabbit - New Features - Step headers can now display error messages. - Distribution chart moved into the main form flow for clearer visibility. - Post-launch actions updated: show “View NFT Collection” or “View Coin” when available; show “Cancel” before completion. - Refactor - Simplified bottom action areas and removed pending-based button disabling for a more predictable flow. - Style - Improved spacing, alignment, and responsiveness in forms. - Updated error text to “Token allocation exceeds total supply” for clearer guidance.

vercel bot temporarily deployed to Preview – nebula August 28, 2025 19:10 Inactive

vercel bot temporarily deployed to Preview – thirdweb_playground August 28, 2025 19:10 Inactive

vercel bot temporarily deployed to Preview – docs-v2 August 28, 2025 19:10 Inactive

vercel bot temporarily deployed to Preview – wallet-ui August 28, 2025 19:10 Inactive

github-actions bot assigned MananTank Aug 28, 2025

github-actions bot added the Dashboard Involves changes to the Dashboard. label Aug 28, 2025

MananTank marked this pull request as ready for review August 28, 2025 19:11

MananTank requested review from a team as code owners August 28, 2025 19:11

vercel bot deployed to Preview – thirdweb-www August 28, 2025 19:18 View deployment

coderabbitai bot reviewed Aug 28, 2025

View reviewed changes

MananTank mentioned this pull request Aug 28, 2025

[MNY-127] Dashboard: Remove unnecessary server action for fetching token list #7940

Merged

gregfromstl approved these changes Aug 28, 2025

View reviewed changes

graphite-app bot force-pushed the mny-128 branch from 2e855f0 to 51f7418 Compare August 28, 2025 21:26

vercel bot temporarily deployed to Preview – wallet-ui August 28, 2025 21:27 Inactive

vercel bot temporarily deployed to Preview – docs-v2 August 28, 2025 21:27 Inactive

vercel bot temporarily deployed to Preview – nebula August 28, 2025 21:27 Inactive

vercel bot temporarily deployed to Preview – thirdweb_playground August 28, 2025 21:27 Inactive

vercel bot deployed to Preview – thirdweb-www August 28, 2025 21:35 View deployment

graphite-app bot merged commit 51f7418 into main Aug 28, 2025
25 checks passed

graphite-app bot deleted the mny-128 branch August 28, 2025 21:36

vercel bot temporarily deployed to Production – thirdweb_playground August 28, 2025 21:36 Inactive

vercel bot temporarily deployed to Production – wallet-ui August 28, 2025 21:36 Inactive

vercel bot temporarily deployed to Production – docs-v2 August 28, 2025 21:36 Inactive

vercel bot temporarily deployed to Production – nebula August 28, 2025 21:36 Inactive

vercel bot deployed to Production – thirdweb-www August 28, 2025 21:44 View deployment

[MNY-128] Dashboard: UI tweaks in token creation flow #7939

[MNY-128] Dashboard: UI tweaks in token creation flow #7939

Conversation

MananTank commented Aug 28, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR-Codex overview

Detailed summary

Summary by CodeRabbit

Uh oh!

vercel bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

linear bot commented Aug 28, 2025

Uh oh!

changeset-bot bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review ran into problems

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Status, Documentation and Community

Uh oh!

MananTank commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

codecov bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

graphite-app bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MananTank commented Aug 28, 2025 •

edited by coderabbitai bot

Loading

vercel bot commented Aug 28, 2025 •

edited

Loading

changeset-bot bot commented Aug 28, 2025 •

edited

Loading

coderabbitai bot commented Aug 28, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

MananTank commented Aug 28, 2025 •

edited

Loading

codecov bot commented Aug 28, 2025 •

edited

Loading

github-actions bot commented Aug 28, 2025 •

edited

Loading

graphite-app bot commented Aug 28, 2025 •

edited

Loading